<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="username" >


<input type="button"  value="localStorage 设置数据" id="localStorageId">


<input type="button"  value="localStorage 获取数据" id="getlocalStorageId">

<input type="button"  value="localStorage 删除数据" id="removesessionStorageId">

<input type="button"  value="localStorage 更新数据" id="updatesessionStorageId">

<input type="button"  value="localStorage 清除所有数据" id="clearsessionStorageId">
<script>
            document.getElementById("localStorageId").onclick=function(){
                    //把用户在input 里面数据的数据保存到localStorage
                    var username=document.getElementById("username").value;
                    window.localStorage.setItem("username",username);
            };

            document.getElementById("getlocalStorageId").onclick=function(){
                    //获取数据，从localStorage
                  var username=window.localStorage.getItem("username");
                alert(username);
            };

            /**
             *  我们存储数据，可以通过sessionStorage，或者 localStorage
             *
             *  sessionStorage 与localStorage 都是以键值对的方式去保存数据.
             *
             *  sessionStorage  里面保存的数据，都是放在浏览器的内存当中，关闭浏览器的就没有了
             *
             *  而且，只能在当前窗口有效.
             *
             *  localStorage  里面保存的数据  都在硬盘上面，关闭了浏览器，数据还是在硬盘上面
             *
             *  重新打开浏览器，我们还是可以获取到localStorage 里面的数据.
             *
             *
             *  我访问jd ，jd 返回一个页面，这个页面上面有一段js，这个js 往你的硬盘上面保存数据 localstorage
             *
             *  我在jd 的子页面是可以通过localstorage 来获取之前设置的数据.
             *
             *
             *  我访问tinamao ，我在天猫获取不了在jd 上面设置的数据.
             *
             *
             *  数据什么时候消失.
             *          1:我们调用removeItem 可以清除数据
             *          2:我们调用clear 可以清除数据
             *          3:清楚浏览器的历史记录
             *          4：使用一些杀毒软件.
             *
             *
             *
             */

</script>

</body>
</html>